<script setup>
import {ref, watch, onMounted} from 'vue'
import {ElMessage} from "element-plus";
import {addUserAPI, updateAPI} from "@/apis/system/user/user";
import {useUserListStore} from "@/stores/system/user/useUserList";


const {getUserList} = useUserListStore()
/*const userFormIsVisible = ref(true)*/
const props = defineProps({
  fromTitle: {
    type: String,
    required: true,
    default: '添加用户'
  },
  userFormIsVisible: {
    type: Boolean,
    required: true,
    default: false
  }
})
// 表单ref
const form = ref(null)
const userData = ref({
  id: 0,
  username: 'admin',
  password: '',
  realName: 'Tom',
  nickName: "--",
  gender: 0,
  departmentId: '',
  departmentName: '开发',
  phone: '18152185155',
  email: '14521511@qq.com',
  isEnabled: 1,
  avatar: '',
})
// 初始表单
const initForm = () => {
  form.value.clearValidate()
  userData.value = {
    id: 0,
    username: '',
    password: '',
    realName: '',
    nickName: "",
    gender: 0,
    departmentId: '',
    departmentName: '',
    phone: '',
    email: '',
    isEnabled: 1,
    avatar: '',
  }
}
// 表单校验规则
const rules = ref({
  username: [{
    required: true,
    message: '请输入账号',
    trigger: 'blur'
  }, {
    min: 6,
    max: 12,
    message: '账号在6-12位',
    trigger: 'blur'
  }],
  password: [{
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  },
    {
      min: 6,
      max: 12,
      message: '密码在6-12位',
      trigger: 'blur'
    }
  ],
})

/*watch(props.id, (newValue, oldValue) => {
  alert(newValue)
})*/

// 将子数据暴露给父亲
defineExpose({userData})

const submit = async () => {
  form.value.validate(async (valid) => {
    if (valid) {
      if (userData.value.id === 0) {
        const {data: res} = await addUserAPI(userData.value)
        if (res.code === 200) {
          ElMessage.success(res.data)
          getUserList()
        }
      } else {
        const {data: res} = await updateAPI(userData.value)
        if (res.code === 200) {
          ElMessage.success(res.data)
          getUserList()
        }
      }
      // 关闭表单
      userFormIsVisibleIsFalse()
      // 初始化表单
      initForm()
    }
  })
}

// 子向父传参数
const emit = defineEmits(['updateUserFormIsVisibleIsFalse'])
// 关闭表单对话框

const userFormIsVisibleIsFalse = () => {
  props.userFormIsVisible = false
  initForm()
  emit('updateUserFormIsVisibleIsFalse', props.userFormIsVisible)
}

</script>

<template>
  <el-dialog @close="userFormIsVisibleIsFalse()" :model-value="userFormIsVisible" :title="fromTitle" width="40%" center>
    <el-form
        ref="form"
        :model="userData"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon

    >
      <el-form-item label="账号" prop="username">
        <el-input clearable placeholder="请输入用户名" v-model="userData.username"/>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" :disabled="userData.id!==0" clearable placeholder="请输入密码"
                  v-model="userData.password"/>
      </el-form-item>

      <el-form-item label="真实名称" prop="realName">
        <el-input clearable placeholder="请输入用户名" v-model="userData.realName"/>
      </el-form-item>

      <el-form-item label="昵称" prop="nickName">
        <el-input clearable placeholder="请输入用户名" v-model="userData.nickName"/>
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="userData.gender">
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item label="电话号码" prop="phone">
        <el-input type="tel" clearable placeholder="请输入用户名" v-model="userData.phone"/>
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input type="email" clearable placeholder="请输入用户名" v-model="userData.email"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
          <el-button type="primary" @click="submit()">
          提交
        </el-button>
        <el-button @click="userFormIsVisibleIsFalse()">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped></style>
